<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .star {
            cursor: pointer;
            font-size: 20px;
            color: #f0f0f0;
        }
        .star.filled {
            color: gold;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination button {
            border: none;
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            margin: 0 5px;
            cursor: pointer;
        }
        .pagination button:disabled {
            background-color: #d6d6d6;
            cursor: not-allowed;
        }
        .top-right-link {
            position: fixed; /* 或者使用 position: absolute; 取决于你的需求 */
            top: 20px; /* 距离页面顶部的距离 */
            right: 20px; /* 距离页面右边的距离 */
            z-index: 1000; /* 确保链接在其他元素之上 */
        }

        .top-right-link a {
            text-decoration: none; /* 去除下划线 */
            color: #007bff; /* 链接颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        .top-right-link a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
    </style>
</head>
<body>
<h1 id="hh">可借的书</h1>
<input type="text" id="name">
<input type="button" value="搜索" onclick="fetchData()">
<div class="top-right-link">
    <a href="./myCollectBooks.html" target="_blank">我的收藏</a>
</div>
<table id="dataTable">
    <thead>
    <tr>
        <th>名称</th>
        <th>链接</th>

    </tr>
    </thead>
    <tbody id="tableBody">
    <!-- 数据行将通过 JavaScript 插入 -->
    </tbody>
</table>

<div class="pagination" id="pagination">
    <!-- 翻页按钮将通过 JavaScript 插入 -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    const rowsPerPage = 10;
    let currentPage = 1;
    let favorites = new Set();

    /*$(function (){
        fetchData(currentPage);
    });*/

    function fetchData(page) {
        const apiUrl = 'http://localhost:9090/aibj/search';

        var name =$("#name").val();
        $.ajax({
            url: apiUrl,
            method: 'GET',
            data: {
                name: name
            },
            dataType: 'json',
            success: function(response) {
                renderTable(response,currentPage);
                //renderPagination(response.total);
            },
            error: function(xhr, status, error) {
                console.error('获取数据失败:', error);
            }
        });
    }

    function toggleFavorite(id,library,isCollect) {
        if(isCollect==0){
            collect(id, library, 1).then(res => {
                if (res === 1) {
                    // 更新 DOM 或执行其他操作
                    $("#"+id).addClass("filled");
                    alert("收藏成功");
                }
            }).catch(error => {
                console.error('收藏操作失败:', error);
                alert("收藏失败，请重试");
            });

        }else if(isCollect==1){
            collect(id, library, 0).then(res => {
                if (res === 1) {
                    // 更新 DOM 或执行其他操作
                    $("#"+id).removeClass("filled");
                    alert("取消成功");
                }
            }).catch(error => {
                console.error('收藏操作失败:', error);
                alert("取消失败，请重试");
            });
        }
    }

    function renderTable(data, page) {
        /*const start = (page - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        const paginatedData = data.slice(start, end);*/

        const tableBody = document.getElementById('tableBody');
        tableBody.innerHTML = '';

        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.name}</td>
                <td><a target="_blank" href="https://aibj.fun/${item.id}">${item.name}</a></td>
            `;
            console.log();
            tableBody.appendChild(row);
        });
    }

    function renderPagination(totalItems) {
        const pagination = document.getElementById('pagination');
        const totalPages = Math.ceil(totalItems / rowsPerPage);
        pagination.innerHTML = '';

        for (let i = 1; i <= totalPages; i++) {
            const button = document.createElement('button');
            button.textContent = i;
            button.onclick = () => {
                currentPage = i;
                fetchData(currentPage);
            };
            if (i === currentPage) {
                button.disabled = true;
            }
            pagination.appendChild(button);
        }
    }

    function collect(isbn, library, isCollect) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: 'http://localhost:9090/collect',
                method: 'GET',
                data: { isbn, library, isCollect },
                dataType: 'json',
                success: function(response) {
                    resolve(response);
                },
                error: function(xhr, status, error) {
                    reject(error);
                    console.error('获取数据失败:', error);
                }
            });
        });
    }



</script>
</body>
</html>
